<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<html>
<head>
    <meta charset="UTF-8">
    <title>拼多多在线商城</title>
    <link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" type="text/css" href="css/login.css">
</head>
<body>
<canvas class="canvas"></canvas>
<form id="loginForm" action="userLoginServlet" method="post">
    <input type="hidden" name="action" value="userLogin">
    <img src="images/background/loginbag.jpg" alt="" class="loginleft">
    <div id="login_box">
        <h2>个人登录</h2><br>
        <div class="input_box">
            <input type="text" placeholder="请输入用户名" name="userName" class="fect" id="usernameInput">
        </div>
        <div class="input_box2">
            <input type="password" placeholder="请输入密码" name="passWord" class="fect" id="passwordInput">
        </div>
        <br>
        <button type="submit" class="dlu">登录</button>
        <div id="message" class="error-message"></div>
    </div>
</form>
<form action="register.jsp" method="post">
    <button class="zce">没有账户？点击注册-></button>
</form>
<%--用户输入验证码--%>
<div class="word">
    <input type="text" id="inputCode" name="inputCode">
    <div id="captcha"></div>
    <div id="generatedCode"></div>
    <button id="refreshButton" onclick="generateCode()">看不清？换一张</button>
</div>
<script src="js/login.js"></script>
<script src="js/canvas.js"></script>
<script>
    document.getElementById('loginForm').addEventListener('submit', function(e) {
        e.preventDefault();

        const messageDiv = document.getElementById('message');
        messageDiv.style.display = 'none';

        // 使用完整的上下文路径
        const contextPath = '${pageContext.request.contextPath}';

        const formData = new URLSearchParams(new FormData(this));

        fetch(contextPath + '/userLoginServlet', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded'
            },
            body: formData
        })
            .then(response => {
                if (!response.ok) {
                    throw new Error('Network response was not ok');
                }
                return response.text().then(text => {
                    try {
                        return JSON.parse(text);
                    } catch (e) {
                        console.error('Server response:', text);
                        throw new Error('Invalid JSON response');
                    }
                });
            })
            .then(data => {
                if (data.status === 'success') {
                    sessionStorage.setItem('userType', 'user');
                    window.location.href = contextPath + data.redirectUrl;
                } else {
                    messageDiv.textContent = data.message || '登录失败';
                    messageDiv.style.display = 'block';
                }
            })
            .catch(error => {
                console.error('Error:', error);
                messageDiv.textContent = '登录失败，请稍后重试';
                messageDiv.style.display = 'block';
            });
    });
</script>
<style>
    .error-message {
        color: red;
        margin-top: 10px;
        display: none;
    }
</style>
</body>
</html>
